﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习1：QQ会员页面导航</title>
  <style>
    *{
       margin:0px;
       padding:0px;
     }
    a:link{
       color:#333;
       text-decoration:none;
     }
    a:hover{
       color:orange;
     }
    li{
       list-style:none;
     }
    .box{
       width:230px;
       background:#f5f9fc;
       border:1px solid #aacbee;
       margin:10px auto;
    }
    .box h3{
       padding-left:25px;
       height:40px;
       line-height:40px;
       font-size:14px;
       background:url(image/title_icon.gif) no-repeat 3px center;
    }
    .box ul{
       padding-bottom:8px;
    }
    .box li{
       padding-left:15px;
       height:28px;
       background:url(image/submenu.gif) no-repeat 50px 0px;
       line-height:28px;
       border-top:1px solid #aacbee;
       margin:0px 5px;
       font-size:14px;
    }  
  </style>
  </head>
  <body>
    <div class="box">
      <h3>课程导航</h3> 
      <ul>
        <li><a href="#">ACCP 软件工程师</a></li>
        <li><a href="#">BTEST 软件测试工程师</a></li>
        <li><a href="#">BENET 网络工程师</a></li>
        <li><a href="#">JBNS 网站工程师</a></li>
        <li><a href="#">ACCP 启蒙星</a></li>
        <li><a href="#">ANDROID 软件工程师</a></li>
        <li><a href="#">JAVA 软件工程师</a></li>
        <li><a href="#">.NET 软件工程师</a></li>
        <li><a href="#">网络营销</a></li>
      </ul>  
    </div>
  </body>
</html>





